<template>
  <div class="home" v-loading="loading">
    <h1>首页</h1>
    <hr/>
    <p class="xlfx" style="text-align: center; font-size: 25px">销量分析图</p>
    <div id="main1" style="width: 100%; height: 300px"></div>
    <div id="main2" style="width: 100%; height: 300px"></div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import { reactive, onMounted, ref } from "vue";
import service from "../../utils/service";

const loading = ref(true)

onMounted(() => {
  getDataList1()
  getDataList2()
  loading.value = false
});

// 获取图表数据
const getDataList1 = () => {
  service({
    url: "/admin/data/kData",
  }).then((res: any) => {
    if (res.data.code === "200") {
        arrx.push(...res.data.data.x)
        arry.push(...res.data.data.val)
    }
  }).then(()=>{
    initEcgarts1() //数据更新后调用initeCharts()
  })
};
const getDataList2 = () => {
  service({
    url: "/admin/data/simpleData",
  }).then((res: any) => {
    if (res.data.code === "200") {
      res.data.data.forEach((item: any) => {
        valx.push(item.x)
        valy.push(item.val)
      });
    }
  }).then(()=>{
    initEcgarts2() //数据更新后调用initeCharts()
  })
};

const arrx:any=[]
const arry:any=[]
const valx=reactive<string[]>([])
const valy=reactive<string[]>([])

const initEcgarts1 = () => {
  const myChart = echarts.init(document.getElementById('main1') as HTMLElement);
  let option = {
    toolbox: {
      feature: {
        saveAsImage:{}
      }
    },
    xAxis: {
      type: "category",
      data: arrx,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: arry,
        type: "candlestick",
      },
    ],
  };
  option &&  myChart.setOption(option);
};

const initEcgarts2 = () => {
  const myChart = echarts.init(document.getElementById('main2') as HTMLElement);
  let option = {
    toolbox: {
      feature: {
        saveAsImage:{}
      }
    },
    xAxis: {
      type: "category",
      data: valx,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: valy,
        type: "line",
        smooth: true
      },
    ],
  };
  option && myChart.setOption(option);
};

</script>

<style scoped>
</style>